<template>
	<view class="time1">
		<!-- <view class="top flex justify-between align-center">
			<text @tap="cancel">取消</text>
			<text @tap="confirm">确定</text>
		</view> -->

		<picker-view class="picker" :value="value" @change="getime" indicator-style="height:80rpx;">
			<picker-view-column>
				<view class="hours" style="line-height:60rpx; text-align: center;padding-top: 10rpx"
					v-for="(item,index) in hoursList" :key="index">{{item<10?"0"+item:item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="minutes" style="line-height:60rpx; text-align: center;padding-top: 10rpx"
					v-for="(item,index) in minutes" :key="index">{{item}}</view>
			</picker-view-column>

			<view v-if="time.length==5">
				<picker-view-column>
					<view style="line-height:30px; text-align: center;">-</view>
				</picker-view-column>
				<picker-view-column>
					<view class="hours" style="line-height:30px; text-align: center;" v-for="(item,index) in hoursList"
						:key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="minutes" style="line-height:30px; text-align: center;" v-for="(item,index) in minutes"
						:key="index">{{item}}</view>
				</picker-view-column>
			</view>
		</picker-view>
	</view>
</template>
<script>
	let minutes = []
	for (let i = 0; i <= 59; i++) {
		if (i < 10) {
			i = "0" + i
		}
		minutes.push(i)
	}
	export default {
		props: {
			time: {
				type: Array,
				default () {
					return [0, 0];
				}
			},
			hoursList: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		watch: {
			time: function() {
				this.value = this.time
			}
		},
		created() {
			// this.getHoursFromNow()

		},
		data() {
			return {
				value: this.time, //默认结束开始时间
				minutes,
			}
		},
		methods: {

			getHoursFromNow() {
				let now = new Date();
				let hoursFrom21 = now.getHours(); // 获取当前小时数
				let hours = [];
				for (let i = hoursFrom21; i < 24; i++) {
					// 将小时数添加到数组中，如果超过24小时，则从0开始
					if (i < 10) {
						i = "0" + i
					}
					this.hoursList.push(i);
				}
			},
			confirm() {
				let time = this.value[0] + ":" + this.value[1]
				this.$emit("confrim", {
					time: time
				})
			},
			cancel() {
				let time = this.value[0] + ":" + this.value[1]
				this.$emit("cancel", {
					time: time
				})
			},
			getime(e) {
				let val = e.detail.value
				this.value[0] = this.hoursList[val[0]]
				this.value[1] = this.minutes[val[1]]
				// this.value[2] = val[2]
				// this.value[3] = this.hoursList[val[3]]
				// this.value[4] = this.minutes[val[4]]
				this.confirm()
			},
		}
	}
</script>
<style lang="scss">
	.time1 {
		width: 100%;
		margin: 0 auto;
		background-color: #FFFFFF;
		color: #000;
		// height: 450rpx;

		.top {
			width: 690rpx;
			margin: 0 auto;
			height: 100rpx;
			line-height: 100rpx;

			text {
				font-weight: bold;

				&:nth-child(1) {
					font-size: 28rpx;
					color: #999;
				}

				&:nth-child(2) {
					font-size: 28rpx;
					color: #0A84FF;
				}
			}
		}

		.tip12 {
			width: 100%;
			height: 100rpx;

			view {
				width: 50%;
				text-align: center;
				line-height: 100rpx;
				font-size: 40rpx;
				color: #000000;
			}
		}

		.hours {
			font-size: 50rpx;
			font-weight: bold;
			color: #000;
		}

		.minutes {
			font-size: 50rpx;
			font-weight: bold;
			color: #000;
		}
	}

	.picker {
		width: 100%;
		height: 300rpx;
	}
</style>